<template>
  <div class="container">
    <div class="add-form">
      <el-dialog
        :title="titleInfo.text + titleInfo.pageTitle"
        :visible.sync="dialogFormVisible"
      >
        <div>
          <h2 class="title">{{ formPre.title }}</h2>
          <span class="time">{{
            formPre.createTime | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
          <span class="name">{{ formPre.username }}</span>
          <span class="el-icon-view"></span>
          <span class="rood">{{ formPre.visits }}</span>
          <div ref="content" class="content"></div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// import { detail } from '@/api/hmmm/articles'

export default {
  name: 'ArticlesPreview',
  props: {
    titleInfo: {
      type: Object,
      required: true
    },
    formPre: {
      type: Object,
      required: true
    }
  },
  updated () {
    this.$nextTick(() => {
      this.$refs.content && (this.$refs.content.innerHTML = this.formPre.articleBody)
    })
  },
  data () {
    return {
      dialogFormVisible: false
      // prevDd: {
      //   title: '',
      //   articleBody: '',
      //   reads: '',
      //   creator: '',
      // },
    }
  },
  computed: {},
  methods: {
    // 弹层显示
    dialogFormDd () {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH () {
      this.dialogFormVisible = false
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  width: 600px;
  div {
    .time {
      padding: 0 10px;
    }
    .name {
      padding-right: 10px;
    }
    .rood {
      padding: 0 10px;
    }
    .content {
      border-top: 1px dashed #ccc;
      background-color: rgb(253, 252, 252);
      margin-top: 10px;
    }
  }
}
</style>
